<!-- 柱状图 -->
<style lang="stylus" scoped>
.columnChart{
  height :400px;
  background-color: #E7F9FE;
  color : #808080;
}
 .columnChart .main{
    width:100%;
    height: calc(100% - 1px);
    margin-top :10px;
  }

</style>

<template>
<div class="columnChart">
  <div class="main"></div>
</div>

</template>

<script>
import echarts from 'echarts'


export default {
  props:["columnChartOption"],
  data() {
    return {
      legendArr: [],
      color: this.$store.state.color,
      myChart: {},
      name: '信使任务'
    }
  },
  methods: {
    _init() {
      this.legendArr = this.myChart.getOption().series;
      this.legendArr.forEach((data) => {
        data.selected = true;
      });
//      this.$root.charts.push(this.myChart);
      window.addEventListener('resize', function() {
        this.myChart.resize()
      }.bind(this))
    }
  },
  components: {

  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    let columnChartObject =this.columnChartOption;
    this.myChart = echarts.init(document.querySelector('.columnChart .main'));
    this.myChart.setOption(
      this.myChart.setOption(columnChartObject));
    this._init()
  }
}

</script>
